Solid Router: Asiakaspuolen navigoinnin hallinta SolidJS:ssä

SolidJS, tunnettu poikkeuksellisesta suorituskyvystään ja yksinkertaisuudestaan, tarjoaa fantastisen perustan nykyaikaisten verkkosovellusten rakentamiseen. Todella mukaansatempaavien ja käyttäjäystävällisten kokemusten luomiseksi vankka asiakaspuolen reititin on välttämätön. Tässä astuu kuvaan Solid Router, SolidJS:n virallinen ja suositeltu reititin, joka on suunniteltu integroitumaan saumattomasti kehyksen reaktiivisiin periaatteisiin.

Tämä kattava opas sukeltaa Solid Routerin maailmaan, kattaen kaiken perusasetuksista edistyneisiin tekniikoihin monimutkaisten ja dynaamisten yhden sivun sovellusten (SPA) rakentamiseksi. Olitpa kokenut SolidJS-kehittäjä tai vasta aloittelija, tämä artikkeli antaa sinulle tiedot ja taidot asiakaspuolen navigoinnin hallitsemiseen.

Mikä on Solid Router?

Solid Router on kevyt ja suorituskykyinen asiakaspuolen reititin, joka on suunniteltu erityisesti SolidJS:lle. Se hyödyntää SolidJS:n reaktiivisuutta päivittääkseen käyttöliittymän tehokkaasti selaimen URL-osoitteen muutosten perusteella. Toisin kuin perinteiset reitittimet, jotka perustuvat virtuaalisen DOM:n vertailuun, Solid Router manipuloi suoraan DOM:ia, mikä johtaa nopeampaan ja ennustettavampaan suorituskykyyn.

Solid Routerin tärkeimpiä ominaisuuksia ovat:

• Deklaratiivinen reititys: Määrittele reitit yksinkertaisella ja intuitiivisella JSX-pohjaisella API:lla.
• Dynaaminen reititys: Käsittele helposti reittejä parametreilla, mikä mahdollistaa dynaamisten ja dataohjautuvien sovellusten luomisen.
• Sisäkkäiset reitit: Järjestä sovelluksesi loogisiin osioihin sisäkkäisten reittien avulla.
• Linkkikomponentti: Navigoi saumattomasti reittien välillä käyttämällä <A>-komponenttia, joka hoitaa automaattisesti URL-päivitykset ja aktiivisen linkin tyylittelyn.
• Datan lataus: Lataa data asynkronisesti ennen reitin renderöintiä, varmistaen sujuvan käyttökokemuksen.
• Siirtymät: Luo visuaalisesti miellyttäviä siirtymiä reittien välille parantaaksesi käyttökokemusta.
• Virheidenkäsittely: Käsittele virheet tyylikkäästi ja näytä mukautettuja virhesivuja.
• History API -integraatio: Integroituu saumattomasti selaimen History API:in, mahdollistaen käyttäjien navigoinnin edestakaisin-painikkeilla.

Solid Routerin käyttöönotto

Asennus

Asenna Solid Router haluamallasi paketinhallinnalla:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

Perusasetukset

Solid Routerin ydin rakentuu <Router>- ja <Route>-komponenttien ympärille. <Router>-komponentti toimii sovelluksesi reititysjärjestelmän juurena, kun taas <Route>-komponentit määrittelevät vastaavuuden URL-osoitteiden ja komponenttien välillä.

Tässä on perusesimerkki:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Tässä esimerkissä <Router>-komponentti käärii koko sovelluksen. <Route>-komponentit määrittelevät kaksi reittiä: yhden juuripolulle ("/") ja toisen polulle "/about". Kun käyttäjä siirtyy jompaankumpaan näistä poluista, vastaava komponentti (Home tai About) renderöidään.

<A>-komponentti

Navigoidaksesi reittien välillä, käytä Solid Routerin tarjoamaa <A>-komponenttia. Tämä komponentti on samankaltainen kuin tavallinen HTML:n <a>-tagi, mutta se hoitaa automaattisesti URL-päivitykset ja estää koko sivun uudelleenlatauksen.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

Kun käyttäjä klikkaa yhtä näistä linkeistä, Solid Router päivittää selaimen URL-osoitteen ja renderöi vastaavan komponentin käynnistämättä koko sivun uudelleenlatausta.

Edistyneet reititystekniikat

Dynaaminen reititys reittiparametreilla

Solid Router tukee dynaamista reititystä, mikä mahdollistaa reittien luomisen parametreilla. Tämä on hyödyllistä, kun halutaan näyttää sisältöä tietyn ID:n tai slugin perusteella.

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Tässä esimerkissä polun :id-segmentti on reittiparametri. Päästäksesi käsiksi id-parametrin arvoon UserProfile-komponentin sisällä, voit käyttää useParams-hookia:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

useParams-hook palauttaa olion, joka sisältää reittiparametrit. Tässä tapauksessa params.id sisältää id-parametrin arvon URL-osoitteesta. Tämän jälkeen createResource-hookia käytetään käyttäjätietojen noutamiseen ID:n perusteella.

Kansainvälinen esimerkki: Kuvittele globaali verkkokauppa-alusta. Voisit käyttää dynaamista reititystä näyttääksesi tuotetietoja tuotetunnuksen perusteella: /products/:productId. Tämä mahdollistaa yksilöllisten URL-osoitteiden luomisen helposti jokaiselle tuotteelle, mikä helpottaa käyttäjien jakamista ja kirjanmerkkien lisäämistä tietyille tuotteille sijainnista riippumatta.

Sisäkkäiset reitit

Sisäkkäisten reittien avulla voit järjestää sovelluksesi loogisiin osioihin. Tämä on erityisen hyödyllistä monimutkaisissa sovelluksissa, joissa on useita navigointitasoja.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Tässä esimerkissä <Dashboard>-komponentti toimii säiliönä <Profile>- ja <Settings>-komponenteille. <Profile>- ja <Settings>-reitit ovat sisäkkäisiä <Dashboard>-reitin sisällä, mikä tarkoittaa, että ne renderöidään vain, kun käyttäjä on polussa "/dashboard".

Renderöidäksesi sisäkkäiset reitit <Dashboard>-komponentin sisällä, sinun tulee käyttää <Outlet>-komponenttia:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

<Outlet>-komponentti toimii paikkamerkkinä, johon sisäkkäiset reitit renderöidään. Kun käyttäjä siirtyy osoitteeseen "/dashboard/profile", <Profile>-komponentti renderöidään <Outlet>-komponentin sisään. Vastaavasti, kun käyttäjä siirtyy osoitteeseen "/dashboard/settings", <Settings>-komponentti renderöidään <Outlet>-komponentin sisään.

Datan lataus createResource-hookilla

Datan asynkroninen lataaminen ennen reitin renderöintiä on ratkaisevan tärkeää sujuvan käyttökokemuksen tarjoamiseksi. Solid Router integroituu saumattomasti SolidJS:n createResource-hookiin, mikä tekee datan lataamisesta helppoa.

Näimme tästä esimerkin aiemmin UserProfile-komponentissa, mutta tässä se on uudelleen selkeyden vuoksi:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

createResource-hook ottaa kaksi argumenttia: signaalin, joka käynnistää datan latauksen, ja funktion, joka noutaa datan. Tässä tapauksessa signaali on () => params.id, mikä tarkoittaa, että data haetaan aina, kun id-parametri muuttuu. fetchUser-funktio hakee käyttäjätiedot API:sta ID:n perusteella.

createResource-hook palauttaa taulukon, joka sisältää resurssin (haettu data) ja funktion datan uudelleenhakuun. Resurssi on signaali, joka pitää sisällään datan. Voit käyttää dataa kutsumalla signaalia (user()). Jos data on vielä latautumassa, signaali palauttaa arvon undefined. Tämä mahdollistaa latausindikaattorin näyttämisen datan noutamisen aikana.

Siirtymät

Siirtymien lisääminen reittien välille voi parantaa käyttökokemusta merkittävästi. Vaikka Solid Routerissa ei ole sisäänrakennettua tukea siirtymille, se integroituu hyvin kirjastojen, kuten solid-transition-group, kanssa saavuttaakseen sulavia ja visuaalisesti miellyttäviä siirtymiä.

Asenna ensin solid-transition-group-paketti:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

Kääri sitten reittisi <TransitionGroup>-komponentilla:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Tässä esimerkissä jokainen reitti on kääritty <Transition>-komponentilla. name-propsi määrittää siirtymän CSS-luokan etuliitteen, ja duration-propsi määrittää siirtymän keston millisekunteina.

Sinun tulee määritellä vastaavat CSS-luokat siirtymää varten tyylitiedostossasi:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

Tämä CSS-koodi määrittelee yksinkertaisen häivytyssiirtymän. Kun reittiin siirrytään, .fade-enter- ja .fade-enter-active-luokat otetaan käyttöön, mikä saa komponentin ilmestymään häivyttäen. Kun reitistä poistutaan, .fade-exit- ja .fade-exit-active-luokat otetaan käyttöön, mikä saa komponentin häviämään häivyttäen.

Virheidenkäsittely

Virheiden tyylikäs käsittely on olennaista hyvän käyttökokemuksen tarjoamiseksi. Solid Routerissa ei ole sisäänrakennettua virheidenkäsittelyä, mutta voit helposti toteuttaa sen käyttämällä globaalia virherajaa (error boundary) tai reittikohtaista virheenkäsittelijää.

Tässä on esimerkki globaalista virherajasta:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

<ErrorBoundary>-komponentti sieppaa kaikki virheet, jotka tapahtuvat sen lapsielementeissä. fallback-propsi määrittää komponentin, joka renderöidään virheen sattuessa. Tässä tapauksessa se renderöi kappaleen, jossa on virheilmoitus.

<Suspense>-komponentti käsittelee odottavia lupauksia (promises), ja sitä käytetään tyypillisesti asynkronisten komponenttien tai datan latauksen yhteydessä. Se näyttää `fallback`-propsin sisällön, kunnes lupaukset täyttyvät.

Voit laukaista virheen heittämällä poikkeuksen komponentin sisällä:

            function Home() {
  throw new Error('Failed to load home page');

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Kun tämä koodi suoritetaan, <ErrorBoundary>-komponentti sieppaa virheen ja renderöi fallback-komponentin.

Kansainväliset huomiot: Kun näytät virheilmoituksia, ota huomioon kansainvälistäminen (i18n). Käytä käännöskirjastoa tarjotaksesi virheilmoitukset käyttäjän haluamalla kielellä. Esimerkiksi, jos japanilainen käyttäjä kohtaa virheen, hänen tulisi nähdä virheilmoitus japaniksi, ei englanniksi.

Solid Routerin parhaat käytännöt

• Pidä reitit järjestyksessä: Käytä sisäkkäisiä reittejä järjestääksesi sovelluksesi loogisiin osioihin. Tämä helpottaa koodin ylläpitoa ja navigointia.
• Käytä reittiparametreja dynaamiselle sisällölle: Käytä reittiparametreja luodaksesi dynaamisia URL-osoitteita sisällön näyttämiseen tietyn ID:n tai slugin perusteella.
• Lataa data asynkronisesti: Lataa data asynkronisesti ennen reitin renderöintiä tarjotaksesi sujuvan käyttökokemuksen.
• Lisää siirtymiä reittien välille: Käytä siirtymiä parantaaksesi käyttökokemusta ja tehdäksesi sovelluksestasi viimeistellymmän tuntuisen.
• Käsittele virheet tyylikkäästi: Toteuta virheidenkäsittely siepataksesi ja näyttääksesi virheet käyttäjäystävällisellä tavalla.
• Käytä kuvaavia reittinimiä: Valitse reittinimet, jotka kuvaavat tarkasti reitin sisältöä. Tämä helpottaa sovelluksesi rakenteen ymmärtämistä.
• Testaa reittisi: Kirjoita yksikkötestejä varmistaaksesi, että reittisi toimivat oikein. Tämä auttaa sinua havaitsemaan virheet aikaisin ja estämään regressioita.

Yhteenveto

Solid Router on tehokas ja joustava asiakaspuolen reititin, joka integroituu saumattomasti SolidJS:n kanssa. Hallitsemalla sen ominaisuudet ja noudattamalla parhaita käytäntöjä voit rakentaa monimutkaisia ja dynaamisia yhden sivun sovelluksia, jotka tarjoavat sujuvan ja mukaansatempaavan käyttökokemuksen. Perusasetuksista edistyneisiin tekniikoihin, kuten dynaamiseen reititykseen, datan lataukseen ja siirtymiin, tämä opas on antanut sinulle tiedot ja taidot navigoida luottavaisesti asiakaspuolen navigoinnin maailmassa SolidJS:llä. Ota Solid Routerin teho käyttöön ja avaa SolidJS-sovellustesi koko potentiaali!

Muista tarkistaa ajantasaisimmat tiedot ja esimerkit virallisesta Solid Router -dokumentaatiosta: [Solid Router -dokumentaation linkki - Paikkamerkki]

Jatka upeiden asioiden rakentamista SolidJS:llä!